import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);
// 服务器中使用vuex， 将数据保存在全局变量中 window， 浏览器用服务端渲染好的数据进行替换
export default () => {
  let store = new Vuex.Store({
    state: {
      name: "seven",
    },
    mutations: {
      changeName(state, payload) {
        state.name = payload;
      },
    },
    actions: {
      changeName({ commit }) {
        // store.dispatch 调用
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            commit("changeName", "xiao qi");
            resolve();
          }, 1000);
        });
      },
    },
  });

  if (typeof window != "undefined" && window.__INITIAL_STATE__) {
    // 浏览器开始渲染了， 将服务器中的store替换到浏览器中
    store.replaceState(window.__INITIAL_STATE__); // 用服务端加载好的数据替换掉
    // 实际上就是将后端渲染好的结果， 同步给前端 vuex中的核心方法
  }
  return store;
};
